<template>
  <a-drawer :footer="false" :title="dialog.title" :visible="dialog.visible" width="50%" @cancel="handleCancel">
    <ma-crud ref="crudRef" :columns="columns" :options="crud">
      <template #search-dictLabel="{ searchForm, component }">
        <a-input v-model.trim="searchForm[component.dataIndex]" :style="{ width: '240px' }" allow-clear placeholder="请输入名称">
          <template #prefix>
            <icon-search />
          </template>
        </a-input>
      </template>
      <template #dictLabel="{ record }">
        <a-tag :color="record.listClass">{{ record.dictLabel }}</a-tag>
      </template>
    </ma-crud>
  </a-drawer>
</template>

<script lang="ts" name="postFormUpdate" setup>
import { addData, delData, listData, updateData } from "@/api/system/dict/data";

const crudRef = ref();
const currentRow = ref<any>({ dictType: undefined });

const crud = reactive({
  id: "dictCode",
  pk: "dictCode",
  formLayout: "vertical",
  formOption: {
    width: 600,
    layout: [
      {
        formType: "grid",
        gutter: 16,
        cols: [
          { span: 12, formList: [{ dataIndex: "dictLabel" }] },
          { span: 12, formList: [{ dataIndex: "dictValue" }] },
          { span: 12, formList: [{ dataIndex: "listClass" }] },
          { span: 12, formList: [{ dataIndex: "remark" }] }
        ]
      }
    ]
  },
  api: listData,
  showIndex: true,
  operationColumn: true,
  operationColumnAlign: "center",
  operationColumnWidth: 140,
  pageLayout: "normal",
  requestParams: { orderBy: "createTime", orderType: "desc" },
  add: { api: addData, auth: ["system:dict:add"], text: "新增", show: true },
  edit: { api: updateData, auth: ["system:dict:edit"], text: "编辑", show: true },
  delete: { api: delData, auth: ["system:dict:delete"], text: "删除", show: true },
  beforeRequest: (params: any) => (params.dictType = currentRow.value.dictType),
  beforeAdd: (form: any) => {
    form.dictType = currentRow.value?.dictType;
    return true;
  }
});

const columns = reactive([
  {
    title: "字典编码",
    dataIndex: "dictCode",
    hide: true,
    align: "center"
  },
  {
    title: "名称",
    dataIndex: "dictLabel",
    align: "center",
    search: true,
    commonRules: {
      required: true,
      message: "数据名称不能为空"
    }
  },
  {
    title: "数据值",
    dataIndex: "dictValue",
    align: "center",
    commonRules: {
      required: true,
      message: "数据值不能为空"
    }
  },
  {
    title: "回显样式",
    dataIndex: "listClass",
    align: "center",
    hide: true,
    formType: "select",
    dict: {
      name: "sys_dict_color_type",
      cache: true,
      props: { label: "dictLabel", value: "dictValue" },
      translation: true,
      tagColors: true
    }
  },
  {
    title: "描述",
    dataIndex: "remark",
    align: "center",
    formType: "textarea",
    autoSize: { minRows: 3, maxRows: 6 },
    maxLength: 200,
    showWordLimit: true
  },
  {
    title: "创建时间",
    dataIndex: "createTime",
    align: "center",
    addDisplay: false,
    editDisplay: false
  }
]);
const dialog = reactive<DialogOption>({
  visible: false,
  title: "字典配置"
});

const handleCancel = () => {
  dialog.visible = false;
};

const show = async (dictType: number | string) => {
  dialog.visible = true;
  currentRow.value.dictType = dictType;
  await crudRef.value.requestData();
};

defineExpose({
  show
});
</script>
